<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
      .container{
        padding: 1.3rem;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
      .box{
        margin:1rem;
        width:100%;
        height: 15.625rem;
        color:#000;
        text-align: center;
        font-size: 2rem;
        background: darkgreen;
      }
      .box:nth-child(2n) {
        background: #ff2b42;
      }
      .box:nth-child(3n + 1) {
        background: yellow;
      }
    </style>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="animate.min.css">
  </head>
  <body>
    <div class="container">
      <div class="box"><span>item - 1</span></div>
      <div class="box"><span>item - 2</span></div>
      <div class="box"><span>item - 3</span></div>
      <div class="box"><span>item - 4</span></div>
      <div class="box"><span>item - 5</span></div>
      <div class="box"><span>item - 6</span></div>
      <div class="box"><span>item - 7</span></div>
      <div class="box"><span>item - 8</span></div>
      <div class="box"><span>item - 9</span></div>
      <div class="box"><span>item - 10</span></div>
      <div class="box"><span>item - 11</span></div>
      <div class="box"><span>item - 12</span></div>
      <div class="box"><span>item - 13</span></div>
      <div class="box"><span>item - 14</span></div>
      <div class="box"><span>item - 15</span></div>
      <div class="box"><span>item - 16</span></div>
      <div class="box"><span>item - 17</span></div>
      <div class="box"><span>item - 18</span></div>
      <div class="box"><span>item - 19</span></div>
      <div class="box"><span>item - 20</span></div>
      <div class="box"><span>item - 21</span></div>
      <div class="box"><span>item - 22</span></div>
      <div class="box"><span>item - 23</span></div>
      <div class="box"><span>item - 24</span></div>
      <div class="box"><span>item - 25</span></div>
      <div class="box"><span>item - 26</span></div>
      <div class="box"><span>item - 27</span></div>
      <div class="box"><span>item - 28</span></div>
      <div class="box"><span>item - 29</span></div>
      <div class="box"><span>item - 30</span></div>
      <div class="box"><span>item - 31</span></div>
      <div class="box"><span>item - 32</span></div>
      <div class="box"><span>item - 33</span></div>
      <div class="box"><span>item - 34</span></div>
      <div class="box"><span>item - 35</span></div>
      <div class="box"><span>item - 36</span></div>
      <div class="box"><span>item - 37</span></div>
      <div class="box"><span>item - 38</span></div>
      <div class="box"><span>item - 39</span></div>
      <div class="box"><span>item - 40</span></div>
      <div class="box"><span>item - 41</span></div>
      <div class="box"><span>item - 42</span></div>
      <div class="box"><span>item - 43</span></div>
      <div class="box"><span>item - 44</span></div>
      <div class="box"><span>item - 45</span></div>
      <div class="box"><span>item - 46</span></div>
      <div class="box"><span>item - 47</span></div>
      <div class="box"><span>item - 48</span></div>
      <div class="box"><span>item - 49</span></div>
      <div class="box"><span>item - 50</span></div>
      <div class="box"><span>item - 51</span></div>
      <div class="box"><span>item - 52</span></div>
      <div class="box"><span>item - 53</span></div>
      <div class="box"><span>item - 54</span></div>
      <div class="box"><span>item - 55</span></div>
      <div class="box"><span>item - 56</span></div>
      <div class="box"><span>item - 57</span></div>
      <div class="box"><span>item - 58</span></div>
      <div class="box"><span>item - 59</span></div>
      <div class="box"><span>item - 60</span></div>
      <div class="box"><span>item - 61</span></div>
      <div class="box"><span>item - 62</span></div>
      <div class="box"><span>item - 63</span></div>
      <div class="box"><span>item - 64</span></div>
      <div class="box"><span>item - 65</span></div>
      <div class="box"><span>item - 66</span></div>
      <div class="box"><span>item - 67</span></div>
      <div class="box"><span>item - 68</span></div>
      <div class="box"><span>item - 69</span></div>
      <div class="box"><span>item - 70</span></div>
      <div class="box"><span>item - 71</span></div>
      <div class="box"><span>item - 72</span></div>
      <div class="box"><span>item - 73</span></div>
      <div class="box"><span>item - 74</span></div>
      <div class="box"><span>item - 75</span></div>
      <div class="box"><span>item - 76</span></div>
      <div class="box"><span>item - 77</span></div>
      <div class="box"><span>item - 78</span></div>
      <div class="box"><span>item - 79</span></div>
      <div class="box"><span>item - 80</span></div>
      <div class="box"><span>item - 81</span></div>
      <div class="box"><span>item - 82</span></div>
      <div class="box"><span>item - 83</span></div>
      <div class="box"><span>item - 84</span></div>
      <div class="box"><span>item - 85</span></div>
      <div class="box"><span>item - 86</span></div>
      <div class="box"><span>item - 87</span></div>
      <div class="box"><span>item - 88</span></div>
      <div class="box"><span>item - 89</span></div>
      <div class="box"><span>item - 90</span></div>
      <div class="box"><span>item - 91</span></div>
      <div class="box"><span>item - 92</span></div>
      <div class="box"><span>item - 93</span></div>
      <div class="box"><span>item - 94</span></div>
      <div class="box"><span>item - 95</span></div>
      <div class="box"><span>item - 96</span></div>
      <div class="box"><span>item - 97</span></div>
      <div class="box"><span>item - 98</span></div>
      <div class="box"><span>item - 99</span></div>
      <div class="box"><span>item - 100</span></div>
    </div>


    <script>
      const arr = ['fadeInLeftBig','fadeInRightBig'];
      const visible = new VisibleAnimate({
          boxClass: '.box',
          animateClass: arr,
          offset: document.getElementsByClassName('box')[0].clientHeight / 2 ,
          mobile: true,
          delay:200
      });

      visible.init();

    </script>

  </body>
</html>
